import { Button, Form, Input, notification, Select, Switch } from 'antd';
import React, { useEffect, useState } from 'react';
import { PageHeaderWrapper, PageLoading } from '@ant-design/pro-layout';
import { useRequest } from 'ahooks';
import { ApiResult } from '@/services/ApiResult';
import routes from '@/routes';
import { history } from '@@/core/history';

export default (props: any) => {

  const saveUseRequest = useRequest<ApiResult<any>>(
    (payload) => routes.apiRoutes.pluginAliyunRedisSave(payload),
    {
      onSuccess: (ar, params) => {
        if (ar.code === 1) {
          notification.success({
            message: `配置阿里云Redis`,
            description: '操作成功',
          });
          history.replace(routes.pageRoutes.pluginAliyunMonitorRedisSetting);
        }
      },
      manual: true,
      refreshOnWindowFocus: false,
    },
  );

  return (
    <PageHeaderWrapper>
      <Form
        labelCol={{ span: 4 }}
        wrapperCol={{ span: 16 }}
        layout="horizontal"
        initialValues={{}}
        onFinish={(formValue) => {
          console.log('form submit payload', formValue);
          saveUseRequest.run(formValue);
        }}
      >
        <Form.Item
          name="instanceId"
          label="instanceId"
          rules={[
            {
              required: true,
              message: '请输入阿里云Redis instanceId!',
            },
          ]}
        >
          <Input placeholder='instanceId'/>
        </Form.Item>
        <Form.Item
          name="instanceName"
          label="instanceName"
          rules={[
            {
              required: true,
              message: '请输入阿里云Redis instanceName!',
            },
          ]}
        >
          <Input placeholder='instanceName'/>
        </Form.Item>
        <Form.Item
          label='是否开启监控'
          name='isMonitor'
          valuePropName='checked'
        >
          <Switch checkedChildren="启用" unCheckedChildren="关闭"/>
        </Form.Item>

        <Form.Item label=' ' colon={false}>
          <Button type="primary" htmlType="submit" loading={false}>
            提交
          </Button>
        </Form.Item>
      </Form>
    </PageHeaderWrapper>
  );
}
